<template>
  <d2-container type="card" better-scroll>
    <div class="score">
      <div class="tong">
        <el-table width="80%" :data="tableData">
          <el-table-column prop="Year" label="学年度"> </el-table-column>
          <el-table-column prop="Semester" label="学期"> </el-table-column>
          <el-table-column prop="count" label="门数"> </el-table-column>
          <el-table-column prop="SumCredit" label="总学分"> </el-table-column>
          <el-table-column prop="GPA" width="90" label="平均绩点">
          </el-table-column>
        </el-table>
      </div>

      <div class="zong">
        <div class="count_total">
          <d2-icon style="font-size: 30px;" name="tasks" class="icon biao" />

          <span>总门数:{{ this.summary_total.count_total }}</span>
        </div>
        <div class="score_arr">
          <d2-icon
            style="font-size: 30px;"
            name="line-chart"
            class="icon biao"
          />

          <span>总学分:{{ this.summary_total.SumCredit_total }}</span>
        </div>
        <div class="summary_total">
          <d2-icon
            style="font-size: 30px;"
            name="pie-chart"
            class="icon biao"
          />

          <span>总平均绩点:{{ this.summary_total.GPA_total }}</span>
        </div>
        <div class="time">
          <d2-icon style="font-size: 30px;" name="history" class="icon biao" />

          <span
            >更新时间{{ this.summary_total.time.replace("统计时间", "") }}</span
          >
        </div>
      </div>
    </div>
    <div style="padding:20px">
      <h2>全部成绩列表</h2>
      <el-table
        v-loading="loading"
        :data="tableData1"
        stripe
        style="padding:10px;width: 100%"
      >
        <el-table-column prop="xq" label="开课学期" width="180">
        </el-table-column>
        <el-table-column prop="ksxz" label="考试性质" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.ksxz == '正常考试'" type="success">{{
              scope.row.ksxz
            }}</el-tag>
            <el-tag v-else type="warning">其他</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="bcxq" label="补重学期" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.bcxq" type="danger">{{
              scope.row.ksxz
            }}</el-tag>
            <el-tag v-else type="warning">暂无</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="kcdm" label="课程代码" width="180">
        </el-table-column>
        <el-table-column prop="kcxh" label="课程序号" width="180">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.kcxh" type="info">{{
              scope.row.kcxh
            }}</el-tag>
            <el-tag v-else type="warning">暂无</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="kcmc" label="课程名称" width="180">
        </el-table-column>
        <el-table-column prop="lb" label="课程类别" width="180">
        </el-table-column>

        <el-table-column prop="xf" label="学分" width="180"> </el-table-column>
        <el-table-column prop="kscj" label="成绩" width="180">
        </el-table-column>
        <el-table-column label="考试性质" width="180">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.bz == '正常'" type="success">{{
              scope.row.bz
            }}</el-tag>
            <el-tag v-else type="warning">其他</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </d2-container>
</template>

<script>
import { get_all_score } from "@/api/sys.user.js";
import util from "@/libs/util.js";
export default {
  data() {
    return {
      tableData: [],
      loading: false,
      tableData1: [],
      summary_total: null
    };
  },
  methods: {
    //获取全部成绩
    get_all_score1() {
      this.loading = true;
      get_all_score({
        cookie: util.cookies.get("JSESSIONID")
      }).then(res => {
        if (res.coded == 401) {
          this.$message.error(res.msg);
          // this.$router.push('/login');
        } else {
          this.tableData = res.data.summary_arr;
          this.tableData1 = res.data.score_arr;
          this.summary_total = res.data.summary_total;
        }
        this.loading = false;
      });
    }
  },
  created() {
    this.get_all_score1();
  }
};
</script>

<style>
.score {
  display: flex;
}
.tong {
  flex: 9;
  padding: 20px;
  width: 100px;
}
.zong {
  padding: 20px;
  height: 300px;
  flex: 2;
  display: flex;
  /* 竖向排列 */
  flex-direction: column;
  /* 居中 */
  text-align: center;
}
.count_total {
  flex: 1;
  display: flex;
  padding: 5px;
  /* flex-direction: column; */
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 5px 5px 15px #d4d4d4, -5px -5px 15px #ffffff;
}

.score_arr {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* flex-direction: column;
  justify-content: center; */
  align-items: center;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 5px 5px 15px #d4d4d4, -5px -5px 15px #ffffff;
}
.summary_total {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* flex-direction: column;
    justify-content: center; */
  align-items: center;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 5px 5px 15px #d4d4d4, -5px -5px 15px #ffffff;
}
.time {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* flex-direction: column;
    justify-content: center; */
  align-items: center;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 5px 5px 15px #d4d4d4, -5px -5px 15px #ffffff;
}
</style>
